<template>
  <body>
  <div class="background">
    <img src="static/background.jpg" width="100%" height="100%" alt=""/>
  </div>
  <el-page-header @back="goBack" content="登录页面" style="margin-top: -2%">
  </el-page-header>
  <div>
    <el-card class="card">
      <el-form
        autocomplete="on"
        :model="loginForm"
        ref="loginForm"
        label-position="left"
        :rules="rules"
      >
        <h2>风起书城</h2>
        <el-form-item prop="CustomerId">
          <el-input
            name="CustomerId"
            type="text"
            v-model="loginForm.CustomerId"
            autocomplete="on"
            placeholder="请输入用户名"
            clearable
            style="font-size: 18px"
          >
            <template slot="prepend"><div style="width: 42px;color: #0e0d0c;font-size: 18px">用户名</div></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="PassWord">
          <el-input
            name="PassWord"
            type="text"
            v-model="loginForm.PassWord"
            autocomplete="on"
            placeholder="请输入密码"
            clearable
            show-password
            style="font-size: 18px"
          >
            <span slot="prepend"><div style="width: 42px;color: #0e0d0c;font-size: 18px"> 密码</div></span>
          </el-input>
        </el-form-item>
        <el-form-item prop="Code">
          <el-row :span="40">
            <el-col :span="14">
          <el-input name="Code" type="text" v-model="loginForm.Code" auto-complete="on" placeholder="请输入验证码" style="width: 240px;font-size: 18px" clearable>
            <template slot="prepend"><div style="width: 42px;color: #0e0d0c;font-size: 18px">验证码</div></template>
          </el-input>
            </el-col>
            <el-col :span="10">
          <div style="width: 140px;margin-left: 9%" @click="refreshCode">
            <s-identify :identifyCode="identifyCode"></s-identify>
          </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item style="margin-bottom: 60px">
          <el-button
            style="width: 40%;background: darkslateblue;font-size: 18px"
            type="primary"
            :loading="loading"
            @click.native.prevent="handleLogin"
          >登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  </body>
</template>

<script>
  import SIdentify from './SIdentify'

  export default {
    components: {SIdentify},
    data() {
      return {
        rules: {
          CustomerId: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
          PassWord: [{required: true, message: '密码不能为空', trigger: 'blur'}],
          Code: [{required: true, message: '验证码不能为空', trigger: 'blur'}]
        },
        loginForm: {
          CustomerId: "",
          PassWord: "",
          Code: "",
        },
        identifyCode: "",
        identifyCodes: "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
        loading: false,
      };
    },
    created() {
      this.refreshCode();
    },
    methods: {
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            if (this.loginForm.Code == this.identifyCode) {
              this.loading = true;
              var _this = this;
              _this.$axios
                .post('/login/into', {customerId: _this.loginForm.CustomerId, passWord: _this.loginForm.PassWord})
                .then(resp => {
                  if (resp.data.code == 200) {
                    if (resp.data.data == "common") {
                      _this.$router.push({path: "/personalCenter"});
                      _this.$store.commit("doLogin", {id: _this.loginForm.CustomerId, power: resp.data.data});
                    } else if (resp.data.data == "admin"||resp.data.data=="super") {
                      _this.$router.push({path: "/manage"});
                      _this.$store.commit("doLogin", {id: _this.loginForm.CustomerId, power: resp.data.data});
                    }
                  } else {
                    this.loading = false;
                    this.$alert(resp.data.msg, '提示', {
                      confirmButtonText: '确定',
                      callback: action => {
                        this.refreshCode();
                      }
                    })
                  }
                })
                .catch(failResponse => {
                  _this.loading = false;
                });
            } else {
              this.$alert("验证码错误", '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  this.refreshCode();
                }
              })
            }
            ;
          } else {
            // eslint-disable-next-line no-console
            console.log("参数验证不合法！");
            return false;
          }
        });
      },
      goBack() {
        this.$router.push('/header');
      },
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      },
      refreshCode() {
        this.identifyCode = '';
        this.makeCode(this.identifyCodes, 4);
      },
      makeCode(data, l) {
        for (let i = 0; i < l; i++) {
          this.identifyCode += data[this.randomNum(0, data.length)];
        }
      }
    }
  };
</script>

<style scoped>
  .background {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }

  .card {
    position: relative;
    margin-top: 10%;
    margin-left: 37%;
    padding: 1em;
    max-width: 25em;
    background: hsla(0, 0%, 70%, .35) border-box;
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
  }
</style>
